<template>
    <div id="tags" class="tags" v-if="showTags"  v-contextmenu:contextmenu>
        <ul>
            <li @contextmenu.prevent\="contextmenu(index, item.path)" @mouseenter="$set(item, 'closeable', true)" @mouseleave="$set(item, 'closeable', false)"
                class="tags-li" v-for="(item,index) in tagsList"
                :class="{
                    'active': isActive(item.path),
                    'closeable': item.path !== '/dashboard' && (!!item.closeable || isActive(item.path))
                }"
                :ref="index" :key="index">
                <router-link :to="item.path" class="tags-li-title">
                    {{item.title}}
                </router-link>
                <i class="tags-li-icon el-icon-close" @click="closeTags(index)"></i>
            </li>
        </ul>
        <v-contextmenu ref="contextmenu" class="tag-contextmenu">
            <v-contextmenu-item v-if="isActive(currentPath) && currentPath !== dashboard" @click="closeTags(currentIndex)">关闭当前</v-contextmenu-item>
            <v-contextmenu-item @click="handleTags('other')">关闭其他</v-contextmenu-item>
            <v-contextmenu-item @click="handleTags('all')">关闭所有</v-contextmenu-item>
        </v-contextmenu>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tagsList: this.$storage.getOrDefault(this.$constant.STORAGE.TAGS, [{
                    title: '首页',
                    path: '/dashboard',
                    name: '首页'
                }]),
                currentIndex: null,
                currentPath: null,
                dashboard: '/dashboard'
            }
        },
        mounted() {

        },
        methods: {
            contextmenu(index, path) {
                this.currentIndex = index
                this.currentPath = path
            },
            isActive(path) {
                return path === this.$route.fullPath;
            },
            // 关闭单个标签
            closeTags(index) {
                const delItem = this.tagsList.splice(index, 1)[0];
                const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
                if (item) {
                    delItem.path === this.$route.fullPath && this.$router.push(item.path);
                }else{
                    this.$router.push('/');
                }
            },
            // 关闭全部标签
            closeAll(){
                this.tagsList = [{
                    title: '首页',
                    path: '/dashboard',
                    name: '首页'
                }];
                this.$router.push('/');
            },
            // 关闭其他标签
            closeOther(){
                const curItem = this.tagsList.filter(item => {
                    return item.path === this.currentPath || item.path === '/dashboard';
                })
                this.tagsList = curItem;
                this.$router.push(this.currentPath)
            },
            // 设置标签
            setTags(route){
                const isExist = this.tagsList.some(item => {
                    return item.path === route.fullPath;
                })
                if(!isExist){
                    if(this.tagsList.length >= 8){
                        this.tagsList.shift();
                    }
                    this.tagsList.push({
                        title: route.meta.title,
                        path: route.fullPath,
                        name: route.matched[1].components.default.name
                    })
                }
                this.$storage.set(this.$constant.STORAGE.TAGS, this.tagsList)
                this.$bus.$emit(this.$constant.STORAGE.TAGS, this.tagsList);
            },
            handleTags(command){
                command === 'other' ? this.closeOther() : this.closeAll();
            }
        },
        computed: {
            showTags() {
                return this.tagsList.length > 0;
            }
        },
        watch:{
            $route(newValue, oldValue){
                this.setTags(newValue);
            }
        },
        created(){
            this.setTags(this.$route);
        }
    }

</script>


<style lang="scss">
    .tags {
        position: relative;
        height: 30px;
        overflow: hidden;
        padding: 10px;
    }

    .tags ul {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
    }

    .tags-li {
        display: flex;
        float: left;
        margin-right: 10px;
        border-radius: 3px;
        font-size: 12px;
        overflow: hidden;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        border: 3px;
        background: #fff;
        padding: 0 5px 0 12px;
        vertical-align: middle;
        color: #909399;
    }

    .tags-li.active {
        color: #008ad3;
    }

    .tags-li .tags-li-title {
        float: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 5px;
        color: #909399;
    }

    .tags-li.active .tags-li-title {
        color: #008ad3;
    }

    .tags-li .tags-li-icon {
        font-size: 14px;
        position: relative;
        width: 0;
        overflow: hidden;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    .tags-li.closeable .tags-li-icon {
        width: auto;
        margin-left: 1px;
        height: 30px;
        line-height: 30px;
    }

    .tags-li .tags-li-icon:hover {
        color: red;
        -webkit-transform:rotate(180deg);
        transform:rotate(180deg);
        -webkit-transition:-webkit-transform .3s linear;
        transition:transform .3s linear;
    }


    .tags-close-box {
        position: absolute;
        right: 0;
        top: 0;
        box-sizing: border-box;
        padding-top: 1px;
        text-align: center;
        width: 110px;
        height: 30px;
        background: #fff;
        box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
        z-index: 10;
    }
</style>

